<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Webartinfo">
        <meta name="author" content="Webartinfo">
        <title>HouseRental</title>
        <!-- Favicon Icon -->
        <link rel="icon" type="image/png" href="/front/img/favicon.png">
        <!-- Bootstrap core CSS -->
        <link href="/static/front/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Material Design Icons -->
        <link href="/static/front/vendor/icons/css/materialdesignicons.min.css" media="all" rel="stylesheet"
              type="text/css"/>
        <!-- Select2 CSS -->
        <link href="/static/front/vendor/select2/css/select2-bootstrap.css"/>
        <link href="/static/front/vendor/select2/css/select2.min.css" rel="stylesheet"/>
        <!-- Custom styles for this template -->
        <link href="/static/front/css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">

    </head>
    <body>
        <!-- Navbar -->
        <header style="position: fixed;top:0;height: 81px;z-index: 999;width: 100%;">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container" style="margin: auto;">
                    <a class="navbar-brand text-success logo" href="/">
                        <img class="img-fluid" src="/static/front/img/logo.svg" alt="">
                    </a>
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                            aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                   aria-expanded="false">

                                    <span th:if="${session.city != null}">[[${session.city.cityName}]]</span>
                                    <span th:if="${session.city == null}">城市切换</span>
                                </a>
                                <div class="dropdown-menu" style="display: none;">
                                    <a class="dropdown-item" th:href="${'/house?cityId='+city.id}"
                                       th:each="city : ${cityList}">[[${city.cityName}]]</a>
                                </div>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="/">
                                    <i class="fa fa-home"></i> 首页
                                </a>
                            </li>

                            <li class="nav-item" th:each="category : ${categoryList}">
                                <a class="nav-link" th:href="@{'/house?cateId=' + ${category.id}}">
                                    <i class="fa fa-building" th:if="${category.cateName == '整租'}"></i>
                                    <i class="fa fa-cubes" th:if="${category.cateName == '合租'}"></i>
                                    [[${category.cateName}]]
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/notice">
                                    <i class="fa fa-newspaper-o"></i> 新闻公告
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/contact">
                                    <i class="fa fa-envelope"></i> 联系我们
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/admin/house/new">
                                    <i class="fa fa-pencil"></i> 房源发布
                                </a>
                            </li>

                            <shiro:authenticated>　　
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio"
                                       data-toggle="dropdown"
                                       aria-haspopup="true" aria-expanded="false">
                                        <shiro:principal property="userDisplayName"/>
                                        (
                                        <shiro:hasRole name="admin">管理员</shiro:hasRole>
                                        <shiro:hasRole name="customer">租客</shiro:hasRole>
                                        <shiro:hasRole name="owner">出租方</shiro:hasRole>
                                        )
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownPortfolio">
                                        <a class="dropdown-item" href="/admin">后台管理</a>
                                        <a class="dropdown-item" href="/logout">退出</a>
                                    </div>
                                </li>
                            </shiro:authenticated>
                        </ul>
                        <shiro:guest>
                            <div class="my-2 my-lg-0">
                                <ul class="list-inline main-nav-right">
                                    <li class="list-inline-item">
                                        <a class="btn btn-link btn-sm" id="toLogin" href="javascript:void(0)">
                                            <i class="fa fa-user"></i> 登录/注册
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </shiro:guest>
                    </div>
                </div>
            </nav>
        </header>